/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div>
        <sf-progress-bar :value="value"
                         :default-width="width"
                         :default-height="height"
                         :text-hidden="true"
                         :front-color="color" />
        <span>{{ showText }} %</span>
    </div>
</template>

<style lang="stylus">

</style>

<script lang=ts>

    /**
     * Created by hjh on 2017/5/22.
     */

    import { Vue, Component, Prop } from 'vue-property-decorator'

    const HUNDRED = 100;
    const NORMAL = '#4d8dd9';
    const WARN = '#eecc44';
    const ERROR = '#ff6666';
    const NORMAL_MAX = 0.8;
    const ERROR_MIN = 0.9;

    @Component
    export default class ProgressBar extends Vue {
        @Prop({
            type: Number,
            'default': 50
        })  defaultWidth!: number
        @Prop({
            type: Number,
            'default': 8
        })  defaultHeight!: number
        // TODO: type value
        @Prop()  value!: SafeAny

         width: number =  this.defaultWidth
         height: number =  this.defaultHeight

         get color () {
            if (this.value < NORMAL_MAX) {
                return NORMAL;
            } else if (this.value >= ERROR_MIN) {
                return ERROR;
            }
            return WARN;
        }

         get showText () {
            return Math.round(this.value * HUNDRED);
        }
    };

</script>
